<template>
	<view class="newDetails"  >
		<view class="" v-for="(i,index) in list" :key="index">
			<!-- 推送人的信息 -->
			<view class="person" >
				<!-- 推送人顶部 -->
				<view class="top">
					<view class="headpicture">
						<image :src="i.avatar" mode="aspectFill" class="image" v-if="type==1"></image>
						<view class="star">
							*
						</view>
						<view class="pusher" v-if="type==0">
							接收人:
						</view>
						<view class="pusher" v-if="type==1">
							推送人:
						</view>
					</view>
					<view class="time">
						{{i.createtime}}
					</view>
				</view>
				<!-- 推荐给具体人 -->
				<view class="toPerson">
					<view class="item" v-for="item in user_list_arr" v-if="type==0">
						{{item}}
					</view>
					<view class="item" v-if="type==1">
						{{i.realname}}
					</view>
				</view>
			</view>
			<!-- 推送具体信息 -->
			<view class="newsBox" @click="toDetail(project_id,type)">
				<!-- 项目名称、编号 -->
				<view class="item">
					<view class="center">
						<view class="icon">
							<image :src="i.project_log" mode="" class="image"></image>
						</view>
						<view class="entityList">
							<view class="name">
								项目编号：{{i.project_no}}
							</view>
							<view class="num">
								项目名称：{{i.project_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					{{i.content}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		msgDetails,
		pushMsgDetails
	} from '@/request/api.js'
	export default {
		data() {
			return {
				id:'',
				type:'',
				list:[],
				project_id:'',
				user_list_arr:''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.type = e.type
			console.log(this.type,'this.type')
			if(this.type == 1){
				// 收
				this.msgDetails()
			}else{
				this.pushMsgDetails()
			}
		},
		
		methods: {
			toDetail(project_id,type){
				if(type == 0){
					uni.navigateTo({
						url:`/pages/my/ProjectDetails/ProjectDetails?id=${this.project_id}&type=2`
					})
				}else{
					uni.navigateTo({
						url:`/pages/my/ProjectDetails/ProjectDetails?id=${this.project_id}&type=3`
					})
				}
				
			},
			async msgDetails() {
				let res = await msgDetails({
					id: this.id
				})
				this.list = [res.data]
				this.project_id = res.data.project_id
				this.user_list_arr = res.data.user_list_arr
			},
			async pushMsgDetails() {
				let res = await pushMsgDetails({
					id: this.id
				})
				this.list = [res.data]
				this.project_id = res.data.project_id
				this.user_list_arr = res.data.user_list_arr
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newDetails {
		padding: 30rpx;
		font-size: 28rpx;
		color: #47578E;

		.person {
			box-shadow: 1px 1px 5px #88888869;
			border-radius: 20rpx;
			padding: 20rpx;

			.top {
				display: flex;
				align-items: center;
				border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
				padding-bottom: 20rpx;

				.headpicture {
					display: flex;
					align-items: center;
					flex: 1;

					.image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 8rpx;
					}

					.star {
						color: #F8594E;
						font-size: 40rpx;
						position: relative;
						top: 8rpx;
						margin: 0 20rpx;
					}

					.pusher {
						font-size: 28rpx;
					}
				}

				.time {
					width: 50%;
					text-align: right;
				}
			}

			.toPerson {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 0 40rpx 0;

				.item {
					color: #979797;
					margin-right: 20rpx;
					border: 1px solid #979797;
					padding: 6rpx 20rpx;
					border-radius: 10rpx;
					margin-top: 15rpx;
				}
			}
		}

		.newsBox {
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			padding: 20rpx 20rpx 100rpx 20rpx;
			box-shadow: 1px 1px 5px #88888869;
			border-radius: 20rpx;
			margin-top: 40rpx;

			.item {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				.msg {
					color: #47578E;
					font-weight: 500;
					margin: 12rpx 0;
				}

				.center {
					display: flex;
					color: #505050;
					margin: 15rpx 0;
					border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
					padding-bottom: 15rpx;
					box-sizing: border-box;

					.icon {
						width: 72rpx;
						height: 72rpx;

						.image {
							width: 100%;
							height: 100%;
						}
					}

					.entityList {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						text-overflow: ellipsis;

						.name {
							margin-left: 15rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.num {
							margin-left: 15rpx;
							margin-top: 5rpx;
						}
					}
				}

				.bot {
					display: flex;
					justify-content: space-between;
					margin: 12rpx 0;

					.time {
						color: #979797;
						font-size: 26rpx;
					}

					.details {
						color: #555EDE;
						color: #555EDE;
						border: 1px solid;
						padding: 6rpx 24rpx;
						border-radius: 28rpx;
					}
				}
			}
		}
	}
</style>